<template lang="pug">
div
  nav-div
  .ui.grid.middle.aligned.divided
  //-   .eight.wide.column
  //-     .ui.grid.equal.width
  //-       .column
  //-         .ui.secondary.menu
  //-           .item.link.margin-center(v-bind:class="{ active: state === 0 }", @click="state = state === 0 ? null : 0")
  //-             .ui.small.statistic
  //-               .value 22
  //-               .label 待核对
  //-       .column
  //-         .ui.secondary.menu
  //-           .item.link.margin-center(v-bind:class="{ active: state === 1 }", @click="state = state === 1 ? null : 1")
  //-             .ui.small.statistic
  //-               .value 22
  //-               .label 待输入
  //-   .eight.wide.column
  //-     .ui.grid.equal.width.middle.aligned
  //-       .column
  //-         .ui.secondary.menu
  //-           .item.link.margin-center(v-bind:class="{ active: state === 4 }", @click="state = state === 4 ? null : 4")
  //-             .ui.small.statistic
  //-               .value 22
  //-               .label 全部
  //-
  //- .ui.section.divider
  .ui.grid
    .twelve.wide.column
      .ui.checkbox
        input(type='checkbox', id="all")
        label.pointer(for="all") 全选
    .four.wide.column.right.aligned
      .ui.selection.dropdown 导出
        i.dropdown.icon
        .menu
          .item 导出
          .item 导出
  .ui.divider
  table.ui.very.basic.table
    thead
      tr
        th &nbsp;
        th 报告编号
        th 状态
        th 姓名
        th 手机号
        th 所在省市
        th 生成时间
        th 来源
    tbody
      tr(v-for="report in reports | orderBy 'id' -1")
        td
          .ui.checkbox
            input(type='checkbox')
            label
        td
          a(v-link="{ name: 'report', params: { id: report.id } }", target="_blank") {{report.id}}
        td {{report.status | reportStatus}}
        td {{report.name}}
        td {{report.phone}}
        //- td {{report.name}}
        td {{ report.created_at | unixToDate }}
        td {{ report.category | reportCategory }}
</template>

<script>
import NavDiv from '../../modules/nav'
import { getReports } from '../../vuex/action'

export default {
  name: 'reports',
  components: {
    NavDiv,
  },
  vuex: {
    getters: {
      reports: ({ report }) =>  report.reports,
    },
    actions: {
      getReports,
    }
  },
  data () {
    return {
      state: null,
      user_id: null,
    }
  },
  route: {
    data({ to: { query: { user_id } } }) {
      this.user_id = user_id
    }
  },
  ready () {
    $(this.$el).find('.dropdown').dropdown({
      on: 'hover'
    })
    this.loadFn()
  },
  methods: {
    loadFn () {
      catchError(async () => {
        if (this.user_id) {
          this.helper.title(`用户 ${this.user_id} 的全部验光报告`)
          await this.getReports({
            user_id: this.user_id,
          })
        } else {
          await this.getReports()
        }
      })
    },
  },
  watch: {
    user_id: {
      handler (val, old) {
        this.loadFn()
      },
    },
  },
}
</script>

<style lang="sass" scoped>
</style>
